<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 700px;
            height: 525px;
            position: relative;
            display: none;
        }

        span{
            position: absolute;
            right:10px;
            top:10px;
            color:Red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!--
        需求：3s之后显示一张图片，当点击X关闭之后在间隔3s再次显示
        定时器：周期性定时器
    -->
    <div id="box">
        <img src="image/1.jpg" alt="">
        <span>X</span>
    </div>
    
    <script>
        var box = document.getElementById("box");
        var span = document.getElementsByTagName("span")[0];
        //调用定时器执行对应的功能
        setInterval(show,3000);
        function show(){
            box.style.display = "block";
        }
        span.onclick = function(){
            box.style.display = "none";
        }
        //周期性定时器可以完成烦人的广告
    </script>
</body>
</html>